<template>
    <button class="wl-button" :disabled="disabled" ref="btnRef" :class="{
        [`wl-button--${type}`]: type,
        [`wl-button--${size}`]: size,
        [`is-plain`]: plain,
        [`is-round`]: round,
        [`is-circle`]: circle,
        [`is-disabled`]: disabled || loading,
    }">
        <wl-icon icon="spinner" spin v-if="loading"></wl-icon>
        <wl-icon :icon="icon" v-if="icon"></wl-icon>
        <span v-if="$slots.default">
            <slot />
        </span>
    </button>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue';
import propObj from './props';
const btnRef = useTemplateRef('btnRef')
defineOptions({
    name: 'wl-button'
})
defineProps(propObj)
defineExpose({
    _ref: btnRef
})
</script>

<style scoped lang="less"></style>